<template>
  <view>
    <view class="uni-header">
      <view class="uni-group">
        <view class="uni-title"></view>
        <view class="uni-sub-title"></view>
      </view>
		
      <view class="uni-group">
			<view class="select">
				<uni-data-select v-model="selectIndex" :localdata="rangeDate" :clear="false" @change="changeDateSelect"></uni-data-select>
			</view>
        <input class="uni-search" type="text" v-model="query" @confirm="search" placeholder="请输入搜索内容" />
        <button class="uni-button" type="default" size="mini" @click="search">搜索</button>
      </view>
		
    </view>
	 <view class="head-content" >
	 		<text>
				 {{selectIndex ?'上月':'本月' }}佣金:
			</text>
			<text class="fontColorApp" v-if="LoadingCard">
				￥{{ (priceData /100).toFixed(2)   }}
			</text>
			<view v-else >
				<loadingCard scale="0.3" ></loadingCard>
			</view>
	 </view>
	
    <view class="uni-container">
      <unicloud-db ref="udb" :collection="collectionList" 
			:where="where" page-data="replace"
			field="text,status,price,order.shop_id as shopId,type,create_date,order"
			:orderby="orderby" :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
			v-slot:default="{data,pagination,loading,error,options}" :options="options" loadtime="manual" @load="onqueryload"
		>
        <uni-table ref="table" :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe type="selection" @selection-change="selectionChange">
          <uni-tr>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'text')" sortable @sort-change="sortChange($event, 'text')">进出账说明</uni-th>
            <uni-th align="center" >类型</uni-th>
            <uni-th align="center" >金额</uni-th>
            <uni-th align="center" >商铺信息</uni-th>
            <uni-th align="center" >用户信息</uni-th>
            <uni-th align="center" sortable @sort-change="sortChange($event, 'create_date')">创建日期</uni-th>
            <uni-th align="center">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item,index) in data" :key="index">
            <uni-td align="center">{{item.text}}</uni-td>
            <uni-td align="center">
					<text :style="`color:${item.type==1?'#00c296':'#ff3300'} `" >
							{{item.type==1?'进账':'出账'}}
					</text>
				</uni-td>
            <uni-td align="center" :class="item.price>0?'fontColorApp':'' " style="font-weight: bold;" >
					￥{{(item.price/100).toFixed(2)}}
				</uni-td>
            <uni-td align="center">{{item.order.shop_title}}</uni-td>
            <uni-td align="center">{{item.order.user_nickname}}</uni-td>
            <uni-td align="center">
					<uni-dateformat :date="item.create_date.time_stamp"></uni-dateformat>
				</uni-td>
            <uni-td align="center">
              <view class="uni-group">
					  <button @click="goUrl('/pages/order/uni-pay-orders/detail?id='+item.order.order_no)" class="uni-button" size="mini" type="primary">
						  相关订单
						</button>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="uni-pagination-box">
          <uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current" :total="pagination.count" @change="onPageChanged" />
        </view>
      </unicloud-db>
    </view>
  </view>
</template>

<script>
  import { enumConverter, filterToWhere } from '@/js_sdk/validator/platform_bill.js';
	import { areaPower ,getArea } from "@/js_sdk/manage-area/manage.js";
	import Util from "@/js_sdk/validator/util.js"
  const db = uniCloud.database()
  // 表查询配置
  const dbOrderBy = 'create_date.time_stamp desc' // 排序字段
  const dbSearchFields = [] // 模糊搜索字段，支持模糊搜索的字段列表。联表查询格式: 主表字段名.副表字段名，例如用户表关联角色表 role.role_name
  // 分页配置
  const pageSize = 20
  const pageCurrent = 1

  const orderByMapping = {
    "ascending": "asc",
    "descending": "desc"
  }
  export default {
    data() {
      return {
			collectionList:
			[
					db.collection('platform_bill').orderBy(dbOrderBy).getTemp(),
					db.collection('shop').field("_id,title,tel,area_all").getTemp()
			],
			priceData:0,
			query: '',
			LoadingCard:true,
			where:{
				"order.shop_id.area_all.value":db.command.in( areaPower() ),
				"create_date.time_stamp":db.command.gt( Util.getMonthTimestamp(0).monthStart )
			},
			orderby: dbOrderBy,
			orderByFieldName: "",
			selectedIndexs: [],
			options: {
          pageSize,
          pageCurrent,
          filterData: {},
          ...enumConverter
			},
			imageStyles: {
				width: 64,
				height: 64
			},
			selectIndex:0,
			rangeDate:[
				{text:'本月账单',value:0},
				{text:'上月账单',value:1},
			],
			exportExcelData: []
      }
    },
    onLoad() {
      this._filter = {}
    },
    onReady() {
      this.$refs.udb.loadData()
    },
    methods: {
      onqueryload(data) {
        this.exportExcelData = data
		  this.LoadingCard = false
		  this.getInitPrice()
      },
      getWhere() {
        const query = this.query.trim()
        if (!query) {
          return ''
        }
        const queryRe = new RegExp(query, 'i')
        return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ')
      },
      search() {
        const newWhere = this.getWhere()
        this.where = {
			  ...newWhere,
			  "order.shop_id.area_all.value":db.command.in( areaPower() ),
		  }
        this.$nextTick(() => {
          this.loadData()
        })
      },
      loadData(clear = true) {
        this.$refs.udb.loadData({ clear })
      },
		goUrl(Url){
			uni.navigateTo({url:Url})
		},
      onPageChanged(e) {
        this.selectedIndexs.length = 0
        this.$refs.table.clearSelection()
        this.$refs.udb.loadData({
          current: e.current
        })
      },
      navigateTo(url, clear) {
        // clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
        uni.navigateTo({
          url,
          events: {
            refreshData: () => {
              this.loadData(clear)
            }
          }
        })
      },
		// 月份日期筛选
		changeDateSelect(e){
			let tempTime = Util.getMonthTimestamp(e)
			this.where["create_date.time_stamp"] = db.command.gt(tempTime.monthStart).and(db.command.lt(tempTime.monthEnd))
			this.$nextTick(() => {
			  this.$refs.udb.loadData()
			})
		},
      // 多选处理
      selectedItems() {
        var dataList = this.$refs.udb.dataList
        return this.selectedIndexs.map(i => dataList[i]._id)
      },
      // 批量删除
      delTable() {
        this.$refs.udb.remove(this.selectedItems(), {
          success:(res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
		// 初始化
		async getInitPrice(){
			// 查询订单总量
			const $ = db.command.aggregate
			const dbCmd = db.command
			const Data = await db.collection('platform_bill').aggregate()
			.lookup({
				from: 'shop',
				let: {shopId: "$order.shop_id",areaS: "05300103" },
				pipeline: $.pipeline()
				.match(dbCmd.expr(
						$.and([  $.eq(['$_id', '$$shopId']), ])
				))
				.done(),
				as: 'shopInfo'
			}).match({
				"shopInfo.area_all.value": dbCmd.in(areaPower()),
				"create_date.time_stamp":this.where["create_date.time_stamp"]
			})
			.group({ _id:null,price:$.sum("$price") }).end()
			if(Data.result.data[0]){
				this.priceData = Data.result.data[0].price
			}
			this.LoadingCard = true
		},
      // 多选
      selectionChange(e) {
        this.selectedIndexs = e.detail.index
      },
      confirmDelete(id) {
        this.$refs.udb.remove(id, {
          success:(res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
      sortChange(e, name) {
        this.orderByFieldName = name;
        if (e.order) {
          this.orderby = name + ' ' + orderByMapping[e.order]
        } else {
          this.orderby = ''
        }
        this.$refs.table.clearSelection()
        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      },
      filterChange(e, name) {
        this._filter[name] = {
          type: e.filterType,
          value: e.filter
        }
        let newWhere = filterToWhere(this._filter, db.command)
        if (Object.keys(newWhere).length) {
          this.where = newWhere
        } else {
          this.where = ''
        }
        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      }
    }
  }
</script>

<style lang="scss" scoped >
	.head-content{
		color:#777;
		height:30px;
		display: flex;
		align-items: center;
		padding:10px 20px;
	}
	.select{
		width:200px;
	}
</style>
